import { InfiniteScroll, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { useState } from 'react'

import styles from './index.module.scss'

type Props = {
  id: number
}

let count = 0
// mockRequest 模拟假数据
export async function mockRequest() {
  if (count >= 5) {
    return []
  }
  // 延迟2秒
  await sleep(2000)
  count++
  return [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
  ]
}
const ArticleList = ({ id }: Props) => {
  // 1. 列表数据的变量
  const [data, setData] = useState<string[]>([])
  // 2. 控制列表加载状态 ：true 代表还有数据 | false 没有数据
  const [hasMore, setHasMore] = useState(true)

  /**
   * 3.加载数据方法
   *  1. 组件默认挂载会执行一次，加载一屏的数据，如果不够一屏会再次执行
   *  2. 列表滚动到底部会再次执行
   */
  async function loadMore() {
    // 发送请求获取数据
    const append = await mockRequest()
    // 向列表中追加数据
    setData((val) => [...val, ...append])
    // 判断是否还有数据 =》如果数据设置为 true 可以继续滚动加载数据；没有数据设置为false 不会再继续滚动加载数据
    setHasMore(append.length > 0)
  }
  return (
    <div className={styles.root}>
      {/* 文章列表中的每一项 */}
      {/* <div className="article-item">
        <ArticleItem type={1} />
      </div> */}
      <>
        <List>
          {data.map((item, index) => (
            <List.Item key={index}>{item}</List.Item>
          ))}
        </List>
        {/* 注意：无限加载组件要放到列表后边 */}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </>
    </div>
  )
}

export default ArticleList
